<template>
	<view class="container">
		<view class="top_title">
			<view class="name" :class="selectItem=='emo'?'active_name':''" @click="selectOne('emo',1)">
				情感天地
			</view>
			<view class="name" :class="selectItem=='look'?'active_name':''" @click="selectOne('look',2)">
				寻人寻物
			</view>
		</view>
		<view class="emotion_list" v-for= "(item,index) in list" :key="index" @click="detial(item.id)">
			<view class="name_part">
				<image :src="item.avatar?  item.avatar:'../../static/img/detailInfo/detailavatar.png'" mode=""></image>
				<view class="age">
					<view class="">
						{{item.name}}
					</view>
					<view class="add_age">
						{{item.city}}
					</view>
				</view>
			</view>
			<view class="detail_content">
                {{item.content}}
			</view>
			<view class="detail_content_img">
					<image :src="  item.image[0]" mode=""></image>
			</view>
			<view class="upload_part">
				<view class="time">
					{{$utils.happenTimeFun(item.createTime)}}
				</view>
				<view class="img_status">
					<view class="">
						<image src="../../static/img/detailInfo/zhuan.png" mode=""></image>
					</view>
					<view class="">
						<image src="../../static/img/detailInfo/zan.png" mode=""></image>
					</view>
					<view class="weixin">
						<image src="../../static/img/detailInfo/weixin.png" mode=""></image>
						<view class="weixin_num">
							9
						</view>
					</view>
				</view>
			</view>
 
		
		</view>
		<view class='release' @click="publish()">
			<image src="../../static/img/myCenter/pub_ico.png" mode=""></image>
		</view>
		<view>
				<uni-load-more :status="status"  :content-text="contentText" color="#007aff"  />
		</view>
	</view>
</template>

<script>
	export default {
		components: {

		},
		data() {
			return {
				list: [
				],
				selectItem:"emo",
				status: 'more',
				contentText: {
					contentdown: '查看更多',
					contentrefresh: '加载中',
					contentnomore: '没有更多'
				},
				statusTypes: [{
					value: 'more',
					text: '加载前'
				}, {
					value: 'loading',
					text: '加载中'
				}, {
					value: 'noMore',
					text: '没有更多'
				}],
				page:1,
				pageSize:10,
				maxlength:0,
				type:1,
				

			}
		},
		onLoad(options) {
			setTimeout(function() {
				console.log('start pulldown');
			}, 1000);
			uni.startPullDownRefresh();
		},
		// 下拉刷新
		onPullDownRefresh() {
			console.log('refresh');
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		// 上拉加载
		onReachBottom() {
			let _self = this
			this.status = 'loading'
			uni.showNavigationBarLoading()
			
			console.log('reach');
			setTimeout(function() {
				if(_self.list.length >= _self.maxlength ){
					_self.status = 'noMore'
					// console.log(_self.list.length)
					uni.hideNavigationBarLoading()
				}else{
					_self.status = 'more'
					uni.hideNavigationBarLoading()
				}
				
			}, 2000);
		},
		mounted(){
			this.getdynamicList()
		},
		methods: {
			getdynamicList(){
				let data = {
					page:this.page,
					pageSize:this.pageSize,
					type:this.type
				}
				this.$utils.requert({url:'myDynamic',data:data,type:'post'}).then(res=>{
						if(res.code === 1 ){
							this.$utils.showLayer(res.message)
							this.list = res.data.data
							this.maxlength = res.data.total
						}else{    
							this.$utils.showLayer(res.message)
						}
					})
			},
			detial(id){
				uni.navigateTo({
					url:'/pages/detailInfo/detailInfo?id='+id
				})
			},
			selectOne(value,type){
				this.selectItem=value;
				this.type = type
				this.getdynamicList()
			},
			//发布说说
			publish(){
				uni.navigateTo({
					url:'/pages/shareNewInfo/shareNewInfo?type='+this.type
				})
			}
		}
	}
</script>
<style>
	page {
		width: 100%;
		height: 100%;
		background-color: #fff;
	}
</style>

<style scoped>
	.container {
		width: 95%;
		height: 100%;
		margin: 0 auto;
	}

	.name_part {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
		margin-top: 38rpx;
		padding: 0 25rpx;
		box-sizing: border-box;
	}

	.name_part image {
		width: 110rpx;
		height: 110rpx;
		margin-right: 16rpx;
		border-radius: 60rpx;
	}

	.name_part .age {
		font-size: 32rpx;
		color: #363636;
	}

	.name_part .age .add_age {
		font-size: 24rpx;
		color: #A3A2A2;
	}

	.detail_content {
		font-size: 28rpx;
		color: #363636;
		margin-bottom: 20rpx;
		padding: 0 25rpx;
		box-sizing: border-box;
	}

	.detail_content_img {
		width: 344rpx;
		color: 477rpx;
		margin-bottom: 35rpx;
		padding: 0 25rpx;
		box-sizing: border-box;
	}

	.detail_content_img image {
		width: 344rpx;
		color: 477rpx;
	}

	.upload_part {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 36rpx;
		padding: 0 25rpx;
		box-sizing: border-box;
	}

	.upload_part .time {
		font-size: 24rpx;
		color: #A3A2A2;
	}

	.upload_part .img_status {
		display: flex;
	}

	.upload_part .img_status image {
		width: 34rpx;
		height: 34rpx;
		margin-left: 55rpx;
	}

	.upload_part .img_status .weixin {
		position: relative;
	}

	.upload_part .img_status .weixin .weixin_num {
		position: absolute;
		right: -16rpx;
		top: -4rpx;
		font-size: 16rpx;
		color: #969696;
	}
	.emotion_list{
		border-bottom: 1rpx solid #f6f6f6;
	}
	.release{
		position: fixed;
		right: 40rpx;
		bottom: 150rpx;
	}
	.release image{
		width:130rpx;
		height:130rpx;
	}
	.typelist{
		display: flex;
		height: 80rpx;
		line-height: 80rpx;
	}
	.typelist text{
		font-size: 30rpx;
		margin-left: 30rpx;
	}
	.top_title{
		display: flex;
		margin-top: 18rpx;
		margin-left: 25rpx;
		padding-bottom: 30rpx;
		border-bottom: 1px solid #f6f6f6;
		align-items: baseline;
	}
	.top_title .name{
		margin-right: 30rpx;
		font-size: 28rpx;
		color: #333333;	
	}
	.top_title .active_name{
		font-size: 34rpx;
		color: #FB8408;
	}
</style>
